import React, { Component } from "react";
import ProForm, { ProFormText, ProFormTextArea } from "@ant-design/pro-form";
import { ArrowRightOutlined } from '@ant-design/icons';
import MusicAPI from '@/services/ant-design-pro/music';
import { Modal, message, Space, Image, Tag } from 'antd'

import m_config from '@/config/config'
import No_head from '@/assets/image/no_head.jpg'
import UploadImg from '@/components/UploadImg'
import TagsAdd from '@/components/TagSelect/add';
import { connect } from 'umi'

const { updateSongList } = MusicAPI

@connect(({ music }) => ({
    music,
    classifyTags: music.classifyTags
}))
class Edit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imgFile: undefined,
            CurTags: []
        }
    }

    componentWillMount() {
        const { dispatch, classifyTags } = this.props;
        if (classifyTags.length <= 0) {
            dispatch({
                type: 'music/getClassifyTags'
            })
        }
    }

    setCurTags = (arr) => {
        this.setState({
            CurTags: arr
        })
    }

    /**
     * 编辑
     * @param {obj} params 参数
     * @returns 
     */
    handleSubmit = async (params) => {
        const { isShowModal, initData, setData } = this.props;
        const { imgFile, CurTags } = this.state;
        let i = 0;
        if (imgFile === undefined && (CurTags.length == 0 ||
            JSON.stringify(initData.lable_ids) == JSON.stringify(CurTags))) { // 图片文件判断
            for (let key in params) {
                if (params[key] == initData[key]) {
                    i++;
                }
            }
            if (i >= 3)
                return message.error("您还未修改数据")
        }
        let data = {
            data: {
                // ...initData,
                ...params,
                list_id: initData.list_id,
                list_pic_name: initData.list_pic_name,
                list_pic: initData.list_pic,
            },
            _imgfile: imgFile || null,
        }

        if (CurTags.length != 0 && JSON.stringify(initData.lable_ids) != JSON.stringify(CurTags)) {
            data.data.lable_ids = CurTags.toString();
        }

        let result = await updateSongList(data);
        if (result.status == 'ok') {
            await setData();
            message.success("修改成功");
        } else {
            message.error('修改失败：' + result.data.message);
            console.log(result.data.error);
        }
        this.setCurTags([]);
        isShowModal('edit', false);
    }
    setImageFile = (params) => {
        this.setState({
            imgFile: params
        })
    }
    onCancel = () => {
        const { isShowModal } = this.props;
        this.setCurTags([]);
        isShowModal('edit', false)
    }

    render() {
        const { isModalVisible, initData, classifyTags } = this.props;
        const { CurTags } = this.state;

        return (
            <Modal
                width="600px"
                title={`编辑歌单`}
                footer={false}
                visible={isModalVisible}
                onCancel={this.onCancel}
                destroyOnClose={true}>
                {
                    <ProForm
                        onFinish={(values) => this.handleSubmit(values)}
                        initialValues={initData}
                    >
                        <Space size={12}>
                            <Image
                                width={150}
                                src={initData && initData.list_pic ? m_config.local + initData.list_pic + initData.list_pic_name : No_head}
                                onError={(e) => {
                                    e.target.src = No_head;
                                }}
                            />
                            <ArrowRightOutlined />
                            <UploadImg setImgFile={(values) => this.setImageFile(values)} />
                        </Space>
                        <Space>
                            <ProFormText
                                name="list_name"
                                label="歌单名称"
                                placeholder="请输入名称"
                            />
                            <ProFormText
                                name="list_play_count"
                                label="播放数量"
                                placeholder="请输入数量"
                                rules={[
                                    {
                                        pattern: /^[0-9]*$/,
                                        message: '请输入数字！',
                                    },
                                ]}
                            />
                        </Space>
                        <div>
                            <h4>标签：<TagsAdd
                                initTags={(initData && initData.lable_ids) ? initData.lable_ids : []}
                                callback={this.setCurTags} /></h4>
                            {
                                ((CurTags.length && CurTags) || initData && initData.lable_ids && initData.lable_ids.length) ? <>
                                    {
                                        (CurTags.length && CurTags || initData.lable_ids).map((item, index) => {
                                            return <Tag key={index}>
                                                {classifyTags.sub[item - 1].name}
                                            </Tag>
                                        })
                                    }
                                </> : "无标签"
                            }
                        </div>
                        <ProFormTextArea width="xl" label="简介" name="list_description" />
                    </ProForm>
                }
            </Modal>
        );
    }
}

export default Edit;